<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="along&#39;s blog">
  <meta name="keyword" content="hexo-theme, vuejs">
  
    <link rel="shortcut icon" href="/css/images/logo.png">
  
  <title>
    
      ALONG
    
  </title>
  <link href="/cdn.along/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="/cdn.along/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="/cdn.along/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
  <script src="/cdn.along/jquery/3.2.1/jquery.min.js"></script>
  <script src="/cdn.along/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="/cdn.along/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
  
  
    <!-- MathJax support START -->
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src="/cdn.along/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <!-- MathJax support END -->
  


  
  
    
<script src="/js/local-search.js"></script>


<meta name="generator" content="Hexo 5.4.0"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>
  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>ALONG</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link active">Home</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">Tags</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">Archives</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">About</a>
          
        </li>
      
      
        <li class="menu-item menu-item-search right-list">
    <a role="button" class="popup-trigger">
        <i class="fa fa-search fa-fw"></i>
    </a>
</li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link mobile-active">Home</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">Tags</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">Archives</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">About</a>
            
          </li>
        
      </ul>
    </div>
    
      <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
            <span class="search-icon">
                <i class="fa fa-search"></i>
            </span>
            <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off"
                    placeholder="Please enter your keyword(s) to search." spellcheck="false"
                    type="search" class="search-input">
            </div>
            <span class="popup-btn-close">
                <i class="fa fa-times-circle"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>
    
  </div>
</header>

    <main class="app-body">
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2020/08/27/%E8%99%9A%E6%8B%9Fdom/">vue虚拟dom</a>
      </h2>
      <p class="article-date">2020年8月27日</p>
      
        
  <a href="/tags#vue" >
    <span class="tag-code">vue</span>
  </a>

  <a href="/tags#虚拟dom" >
    <span class="tag-code">虚拟dom</span>
  </a>

      
      <div class="article-summary">
        
          虚拟dom
避免直接操作dom，提高开发效率
作为中间层实现跨平台
复杂视图提高性能

h函数h函数，内部会调用createElement，在core/vdom/create-element.js中定义
createElement接收多个参数，在调用时可以传递不同类型的参数，因此create ...
        
      </div>
      <a class="more" href="/2020/08/27/%E8%99%9A%E6%8B%9Fdom/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2020/08/27/vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/">vue响应式原理</a>
      </h2>
      <p class="article-date">2020年8月27日</p>
      
        
  <a href="/tags#vue" >
    <span class="tag-code">vue</span>
  </a>

      
      <div class="article-summary">
        
          VUE 响应式原理数据响应式原理Vue 2.x

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/sette ...
        
      </div>
      <a class="more" href="/2020/08/27/vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2020/08/27/vue-router%E5%8E%9F%E7%90%86/">vue-router原理</a>
      </h2>
      <p class="article-date">2020年8月27日</p>
      
        
  <a href="/tags#vue" >
    <span class="tag-code">vue</span>
  </a>

  <a href="/tags#vue-router" >
    <span class="tag-code">vue-router</span>
  </a>

      
      <div class="article-summary">
        
          vue-router 原理模拟实现一个vue-router,详见 vuerouter/index.js
借助vuecli 搭建一个vue-router项目，替换掉VueRouter部分为我们自定义的类，目前实现的功能

 history 模式
 hash 模式
 router-view
 r ...
        
      </div>
      <a class="more" href="/2020/08/27/vue-router%E5%8E%9F%E7%90%86/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2020/08/27/%E6%A8%A1%E5%9D%97%E5%8C%96/">模块化</a>
      </h2>
      <p class="article-date">2020年8月27日</p>
      
        
  <a href="/tags#模块化" >
    <span class="tag-code">模块化</span>
  </a>

      
      <div class="article-summary">
        
          模块化模块化的发展阶段stage1最初的模块化依赖文件划分的约定来实现，这种方式存在一些问题

污染全局作用域
命名冲突
无法管理模块依赖关系

stage2命名空间方式，将第一阶段的每个模块包裹在一个全局对象里
123456var moduleA &#x3D; &#123;    name ...
        
      </div>
      <a class="more" href="/2020/08/27/%E6%A8%A1%E5%9D%97%E5%8C%96/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2020/08/27/webpack/">webpack</a>
      </h2>
      <p class="article-date">2020年8月27日</p>
      
        
  <a href="/tags#webpack" >
    <span class="tag-code">webpack</span>
  </a>

      
      <div class="article-summary">
        
          WEBPACK模块化问题
兼容问题：  ES6 =&gt; ES5
模块文件多，网络请求频繁：  打包多个模块到一起
所有的前端资源都需要模块化：  打包不同类型文件

打包工具
webpack 
模块打包 Module bundler
模块加载 loader
代码拆分 Code Split ...
        
      </div>
      <a class="more" href="/2020/08/27/webpack/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2020/08/27/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%9E%84%E5%BB%BA/">自动化构建</a>
      </h2>
      <p class="article-date">2020年8月27日</p>
      
        
  <a href="/tags#自动化" >
    <span class="tag-code">自动化</span>
  </a>

      
      <div class="article-summary">
        
          前端自动化前端自动化构建工具

grunt 基于临时文件，构建速度较慢
gulp 基于内存，同时处理多个任务
FIS 百度，大而全，适合初学者

grunt1yarn add grunt

根目录创建gruntfile.js文件
12345module.exports &#x3D; grun ...
        
      </div>
      <a class="more" href="/2020/08/27/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%9E%84%E5%BB%BA/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2020/08/27/%E8%84%9A%E6%89%8B%E6%9E%B6%E5%B7%A5%E5%85%B7/">脚手架工具</a>
      </h2>
      <p class="article-date">2020年8月27日</p>
      
        
  <a href="/tags#脚手架" >
    <span class="tag-code">脚手架</span>
  </a>

      
      <div class="article-summary">
        
          脚手架工具特定项目脚手架，比如

creat-react-app
vue-cli

通用脚手架工具

Yeoman
plop

Yeoman 通用脚手架12yarn global add yoyarn global add generator-node
我再安装时出现了yo不是内部命令的问题 ...
        
      </div>
      <a class="more" href="/2020/08/27/%E8%84%9A%E6%89%8B%E6%9E%B6%E5%B7%A5%E5%85%B7/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2020/08/26/JS%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B/">JS异步编程</a>
      </h2>
      <p class="article-date">2020年8月26日</p>
      
        
  <a href="/tags#notes" >
    <span class="tag-code">notes</span>
  </a>

  <a href="/tags#javascript" >
    <span class="tag-code">javascript</span>
  </a>

  <a href="/tags#异步编程" >
    <span class="tag-code">异步编程</span>
  </a>

      
      <div class="article-summary">
        
          javascript最初设计为了实现页面的交互操作，为了避免不同线程同时处理dom导致无法判断以那个结果为准，所以不得不采用单线程模式工作，

同步模式与异步模式
事件循环与消息队列
异步编程方式
Promise异步方案、宏任务/微任务
Generator异步方案、Async/Await语法 ...
        
      </div>
      <a class="more" href="/2020/08/26/JS%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2020/08/26/ES6/">ES6</a>
      </h2>
      <p class="article-date">2020年8月26日</p>
      
        
  <a href="/tags#notes" >
    <span class="tag-code">notes</span>
  </a>

  <a href="/tags#javascript" >
    <span class="tag-code">javascript</span>
  </a>

  <a href="/tags#es6" >
    <span class="tag-code">es6</span>
  </a>

      
      <div class="article-summary">
        
          ES2015块级作用域let、const使用let和const定义的值都会产生块级作用域，这两种方式声明的变量只能在所声明的代码块中被访问。const声明的变量是只读的，不可以修改内存地址
块级作用域的应用场景循环计数
12345678// 块级作用域应用于双重循环的计数器for(let i ...
        
      </div>
      <a class="more" href="/2020/08/26/ES6/">Read more</a>
    </article>
  

  
    <div class="guide-pager">
  
    <a href="/page/2/"><span class="page-arrow">← </span>Prev</a>
  
  
    <a class="unvisible" href="/">Next <span class="page-arrow">→</span></a>
  
</div>
  
</main>


    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
  <p class="copyright">
    Copyright&copy; 2019-2022 along
    <br>
    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2020044791号-1</a>
    <!-- <br>
    Theme by <a href="https://github.com/alongithub">alongithub</a>
     -->
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("/cdn.along/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("/cdn.along/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      hljs.configure({useBR: true});
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>
<!-- Baidu Tongji -->


<script src="/js/script.js"></script>


  </body>
</html>